<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绘制线段</title>
</head>
<body>
  <canvas id="chart" width="800" height="500" style="background: #eee;"></canvas>

  <script>
    /** @type {HTMLCanvasElement} */

    // 得到canvas对象
    const canvas = document.getElementById('chart')
    // 得到画笔
    const context = canvas.getContext('2d')

    // 通过画笔绘制
    context.moveTo(100, 200)  // 指定起始位置
    context.lineTo(200, 400)  // 线段的结束位置
    context.lineTo(400, 200)
    context.lineTo(100, 200)

    // 绘制
    context.strokeStyle = 'blue' // 颜色
    context.stroke() // 画出来

  </script>
</body>
</html>